<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<title>视频播放</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/load.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/main_R.css" />-->
		<link rel="stylesheet" type="text/css" href="css/load11.css" />
		<link href="css/video-js.min.css" rel="stylesheet">

		<style>
			#datas{
				overflow: hidden;
			}	
			.Container{
				width: 100%;
				height: 100%;
    			transform-origin:0% 0%;
			}
			.videobox {
				width: 100%;
				height: 100%;
				    
			}
			#my-video{
				
				width: 100%;
				height: 100%;
				
			    /*transform: rotate(90deg)*/
				
			}
			/*video.js 播放封面全屏*/
			.vjs-poster{
				background-size: 100% 100%;
			}
			/*video.js 播放按钮居中*/
			.video-js .vjs-big-play-button {
				position:absolute;
			    top:50%;
			    left:50%;
			    transform:translate(-50%,-50%);
			    font-size: 2.5em;
			    line-height: 2.3em;
			    height: 2.5em;
			    width: 2.5em;
			    -webkit-border-radius: 2.5em;
			    -moz-border-radius: 2.5em;
			    border-radius: 2.5em;
			    background-color: #73859f;
			    background-color: rgba(115,133,159,.5);
			    border-width: 0.15em;
			    
			}
			.vjs-big-play-button .vjs-icon-placeholder {
			    font-size: 1.63em;
			}
			.vjs-loading-spinner {
			    font-size: 2.5em;
			    width: 2em;
			    height: 2em;
			    border-radius: 1em;
			    margin-top: -1em;
			    margin-left: -1.5em;
			}
			/*video.js 显示播放时长*/
			.video-js .vjs-time-control{display:block;}
			.video-js .vjs-remaining-time{display: none;}
		</style>
		
		<style type="text/css">
			.hui-header{
			    height: 100%;
			    width: 20%;
			    /* max-height: 50px; */
			    background: -webkit-linear-gradient(right,rgba(70,70,70,.8),rgba(70,70,70,.1));
			    /* transform: rotate(90deg); */
			    position: static;
			    position: fixed;
			    left: 85% !important;
			}
			.hui-header111{
			    height: 20%;
			    width: 100%;
			    background: -webkit-linear-gradient(top, rgba(70, 70, 70, 0.8), rgba(70, 70, 70, 0.1));
			    position: fixed;
			    left: 0% !important;
		        top: -20px;
			}
			.hui-header #hui-back{
				/*margin-top: 20px;*/
				/*line-height: 50px;*/
				width: 50px;
    			height: 50px;
			    transform: rotate(90deg);
			    
			}
			.hui-header h1{
				line-height: 50px;
			}
			.hui-header #hui-right{
				line-height: 50px;
			}
			
			/*控制摄像头按钮样式*/
			.control_Container{
				z-index: 9; 
				position: fixed; 
				width: 180px; 
				height: 180px; 
				bottom: 0%; 
				right: 0%; 
				/*transform:translate(-50%,calc(-50% - 35px));*/ 
				border-radius: 50%; 
				overflow: hidden; 
			}
			/*控制控件隐藏时 侧边显示加号*/
			.control_block{
				z-index: 9; 
				position: fixed; 
				bottom: 0px; 
				height: 60px; 
				width: 100%; 
				display: -webkit-flex; 
				align-items: center; 
				justify-content: center;
			}
			.control_block > div{
				width: 60px; 
				height: 100%;
			}
			.control_block > div >img{
				width: 100%; 
				height: 100%;
				opacity: 0.5;
			}
			
			
			.tips{
				display: none;
				
				width: 67%;
			    font-size: 18px;
			    position: fixed;
			    top: 50%;
			    left: 20%;
			    text-align: center;
			    line-height: 40px;
			    border-radius: 5px;
			    transform: rotate(90deg);
			    background: rgba(0,0,0,.5);
			}
			.tips p {
				color: #fff;
			}
			
			 /* 摄像头控制按钮样式 */
	        .back{
	        	background-color: rgba(0,0,0,0) !important;
	       	    background-image: url(img/direction.png) !important;
	       	    background-size: 100% 100% !important;
	       	    opacity: 1 !important;
	        }
	        .front{
	        	opacity: 1 !important;
	        }
        	.control_ContainerTop{
        		top: 10%;
        	}
			
			.control_block1{
			    bottom: 0px;
			    right: 0px;
			    height: 100%;
			    width: 60px;
			}
			.narrow1{		
			    width: 100% !important;
			    height: 60px !important;
			    position: absolute;
			    top: 50%;
			}
			.enlarge1{
				width: 100% !important;
			    height: 60px !important;
			    position: absolute;
			    top: 36%;
			}
			.narrow1 img, .enlarge1 img {
			    transform: rotate(0deg) !important;
			}
			.tips1{
			    transform: rotate(0deg);
			}
		</style> 
	</head>

	<body>
		<!--头部-->
		<header class="hui-header" style="">
			<!--<div style="height: 22px;background: #464646;"></div>-->
			<div id="hui-back"></div>
			
		</header>

		<div id="datas" style="height: 100vh;">
			<div class="Container">
				<div class="videobox">
					<video id="my-video" height="100%" width="100%" controls class="video-js" x5-video-player-fullscreen="true" playsinline webkit-playsinline x5-playsinline>
			            <source type="application/x-mpegURL">
			        </video>
				</div>
			</div>
			
			<!--显示控制控件-->
			<div  id="zone_joystick" class="control_Container">
				<div class="zone static"></div>
			</div>
			
			<!--控制控件隐藏时 侧边显示加号-->
			<div class="control_block">
				<div class="narrow">
					<img src="img/narrow.png" alt="" style="transform: rotate(90deg);"/>
				</div>
				<div class="enlarge">
					<img src="img/enlarge.png" alt="" style="transform: rotate(90deg);"/>
				</div>
			</div>
			
			
			<!--摄像头控制操作成功提示-->
			<div class="tips">
				<p>操作成功，请稍后!!!</p>
			</div>
			
			
		</div>
		
	

		<script src="js/func/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
		<script src="Video/videohls/video.js" type="text/javascript" charset="utf-8"></script>
		<script src="Video/videohls/videojs-contrib-hls.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Camera/YCYCloud.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Camera/nipplejs.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var videoUrl = localStorage.getItem('videoUrl');
			var videoImg = localStorage.getItem('videoImg');
			var SerialNo = localStorage.getItem('SerialNo');
			var ChannelNo = localStorage.getItem('ChannelNo');
			
			console.log(videoUrl);
			console.log(baseResURL()+videoImg);
			console.log(SerialNo);
			console.log(ChannelNo);
			
			var videoContainer = document.getElementById("my-video");
			var videoSource = document.querySelector("source");
			videoContainer.setAttribute('poster',baseResURL()+videoImg); 
			
			videoSource.src = videoUrl;

			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function() {
				myPlayer.play();
				myPlayer.on('play', function() {
                    console.log('正在播放');
                });
                //暂停--播放完毕后也会暂停
                myPlayer.on('pause', function() {
                    console.log("暂停中")
                });
                // 结束
                myPlayer.on('ended', function() {
                    console.log('结束'); 
                })
			});
			
			function resizeBody(bodyWidth, bodyHeight) {
				
	 			if(bodyHeight > bodyWidth){//竖屏
	 				$(".videobox").css({
			    		'display': 'box',
					    'box-align': 'center',
					    'box-pack': 'center',
					    
			    		'display':'flex',
			    		'display': '-webkit-flex',
					    'align-items':'center',
					    'justify-content':'center',
			    		
					    
			    	})
			    	$("#my-video").css({
			    		'transform': 'rotate(90deg)',
			    		'margin':'auto',
			    	})
			    	$(".control_block").css({
			    		'bottom': '0',
			    	})
					$(".videobox").height((bodyHeight) + "px");
					$(".videobox").width((bodyWidth) + "px");
		 			$("#my-video").height((bodyWidth) + "px");
					$("#my-video").width((bodyHeight) + "px");
					
		 			$("#my-video #my-video_html5_api").height((bodyWidth) + "px");
					$("#my-video #my-video_html5_api").width((bodyHeight) + "px");
					$(".video-js .vjs-tech").css('position', 'static');
					
					
			    	$('.hui-header').removeClass('hui-header111')
			    	$('#hui-back').css({
			    		'transform': 'rotate(90deg)',
					    'margin-top': '0px',
			    	})
			    	
//					$('.control_Container').removeClass('control_ContainerTop');
					$('.control_block').removeClass('control_block1');
			    	$('.narrow').removeClass('narrow1');
			    	$('.enlarge').removeClass('enlarge1');
			    	$('.tips').removeClass('tips1');
			    	
	 			}else{//横屏
	 				$(".videobox").height((bodyHeight) + "px");
					$(".videobox").width(bodyWidth + "px");
					
		 			$("#my-video").height((bodyHeight) + "px");
					$("#my-video").width(bodyWidth + "px"); 
					$("#my-video").css({
			    		'transform': 'rotate(0deg)',
			    	})
			    	$(".control_block").css({
			    		'right': '0',
			    	})
			    	$('.hui-header').addClass('hui-header111');
			    	$('#hui-back').css({
			    		'transform': 'rotate(0deg)',
					    'margin-top': '30px',
			    	})
			    	
//					$('.control_Container').addClass('control_ContainerTop');
			    	$('.control_block').addClass('control_block1');
			    	$('.narrow').addClass('narrow1');
			    	$('.enlarge').addClass('enlarge1');
			    	$('.tips').addClass('tips1');
			    	
			    	/*$(".control_Container > div").css({
			    		'transform': 'rotate(-90deg)',
			    	})*/
	 			}
	 			
			} 
			
			//进入页面第一次布局
//			window.onload = function(){		
				var bodyWidth = document.documentElement.clientWidth;
				var bodyHeight = document.documentElement.clientHeight;
			    console.log('Width ---' + bodyWidth)
			    console.log('Height ---' + bodyHeight)
				resizeBody(bodyWidth, bodyHeight);
//			}
			
			
				$(window).on('orientationchange', function() {
					var $el = $("#el"); // 需要重新获得宽和高的元素
					var newWidth = $el.width(); // 新的宽
					var newHeight = $el.height(); // 新的高
					
			    	console.log('Width222 ---' + newWidth)
			    	console.log('Height222 ---' + newHeight)
				});
			
			//当用户打开重力感应  横竖屏切换时    改变video的显示布局
			const evt = "onorientationchange" in window ? "orientationchange" : "resize";
			window.addEventListener(evt, function (e) {
				
				
			    setTimeout(function(){
				    	
					var bodyWidth = document.documentElement.clientWidth;
				    var bodyHeight = document.documentElement.clientHeight;
				    console.log('Width ---' + bodyWidth)
				    console.log('Height ---' + bodyHeight)
					resizeBody(bodyWidth, bodyHeight);
			    },300)
			})
			
			
			// 获取临时令牌
            YCYCloud.GetAccessToken();
            // 设置需要控制的视频序列号和通道号（在网关列表已经存在）
            YCYCloud.SetCameraConfig(SerialNo, ChannelNo);
			
			// 摇杆对象 
            var joystick;

            // 摇杆参数
            var joysticks = {
                dynamic: {
                    zone: document.querySelector('.zone.dynamic'),
                    color: 'blue',
                    multitouch: true
                },
                semi: {
                    zone: document.querySelector('.zone.semi'),
                    mode: 'semi',
                    catchDistance: 150,
                    color: 'white'
                },
                static: {
                    zone: document.querySelector('.zone.static'),
                    mode: 'static',
                    position: {
                        left: '50%',
                        top: '50%'
                    },
                    size: 90,
                    color: 'white'
                }
            };
            
             // 创建摇杆 类型：dynamic(动态创建) / semi(半动态创建) / static(静态创建)
            createNipple('static');

            /**
             * 创建滑杆
             * @param evt
             */
            function createNipple(evt) {
                var type = typeof evt === 'string' ?
                    evt : evt.target.getAttribute('data-type');
                if (joystick) {
                    joystick.destroy();
                }

                joystick = nipplejs.create(joysticks[type]);
                
                bindNipple();
            }
            
            /** 控制状态 */
            var controlFlag = false;
            /** 移动状态 */
            var moveFlag = false;
			
			 /** 注册监听事件 */
            function bindNipple() {
                joystick.on('start end', function (evt, data) {
                    if (moveFlag) { // 结束控制
                        setTimeout(YCYCloud.StopCloudControl(), 1500);
                    }
                    moveFlag = !moveFlag;
                    // console.log("开始/结束控制");
                }).on('move', function (evt, data) {
                	var bodyWidth = document.documentElement.clientWidth;
					var bodyHeight = document.documentElement.clientHeight;
                    moveFlag = true;
                    if (data.distance > 40) {
                        var d = data.angle.radian;
                        if (d > 5.9 || d < 0.4) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(0)
                            		MoveCloud(0);
                            	}else{//横屏
                            		console.log(3)
                                	MoveCloud(3);//右
                            	}
                                
                            }
                        } else if (d > 0.4 && d < 1.1) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(4)
                            		MoveCloud(4);
                            	}else{//横屏
                            		console.log(6)
                                	MoveCloud(6);//右上
                            	}
                            }
                        } else if (d > 1.1 && d < 1.9) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(2)
                            		MoveCloud(2);
                            	}else{//横屏
                            		console.log(0)
                                	MoveCloud(0);//上
                            	}
                            }
                        } else if (d > 1.9 && d < 2.6) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(5)
                            		MoveCloud(5);
                            	}else{//横屏
                            		console.log(4)
                                	MoveCloud(4);//左上
                            	}
                            }
                        } else if (d > 2.6 && d < 3.4) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(1)
                            		MoveCloud(1);
                            	}else{//横屏
                            		console.log(2)
                            		MoveCloud(2);//左
                            	}
                                
                            }
                        } else if (d > 3.4 && d < 4.3) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(7)
                            		MoveCloud(7);
                            	}else{//横屏
                            		console.log(5)
                                	MoveCloud(5);//左下
                            	}
                            }
                        } else if (d > 4.3 && d < 5.1) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(3)
                            		MoveCloud(3);
                            	}else{//横屏
                            		console.log(1)
                                	MoveCloud(1);//下
                            	}
                            }
                        } else if (d > 5.1 && d < 5.9) {
                            if (!controlFlag) {
                            	if(bodyHeight > bodyWidth){//竖屏
                            		console.log(6)
                            		MoveCloud(6);
                            	}else{//横屏
                            		console.log(7)
                                	MoveCloud(7);//右下
                            	}
                            }
                        }
                        controlFlag = true;
                    }
                });
            }
            function SuccessTips(language){
            	if(language == 200){
					$(".tips").show();
					setTimeout(function () {
						$(".tips").hide();
					},2000)
            	}
            }
            /** 放大缩小 */
           var enlargeFlag = true, narrowFlag = true;
			/*$('.enlarge').click(function(){
				if(enlargeFlag){
					MoveCloud(8);
					enlargeFlag = false;
					// 延时2.5秒获取返回的参数
					setTimeout(function () {
						console.log(YCYCloud.dataCode);
						if(YCYCloud.dataCode.code == 200){// 操作成功 
//							enlargeFlag = true;
						}
					},2500);
					YCYCloud.dataCode = '';
				}else{
					console.log('请勿频繁操作')
					return false;
				}
				
				
				
            })	*/
            
            $('.enlarge').click(function(){
            	MoveCloud(8);
            })
            
           	$('.narrow').click(function(){
           		MoveCloud(9);
            })	
            
            /** 移动控制 */
            function MoveCloud(dir) {
                YCYCloud.StartCloudControl(dir);
                // 延时1.5秒发送控制指令
                setTimeout(function () {
                    controlFlag = false;
                }, 1000);
            } 
            
           
             
            
            (function rotate(){
			    var orientation=window.orientation;
			    var pd = null;
			    function createPd(){
			        if(document.getElementById('preventTran') === null){
			            var imgData = '';
			            pd = document.createElement('div');
			            pd.setAttribute('id','preventTran');
			            pd.style.position = 'fixed';
			            pd.style.left = '0';
			            pd.style.top = '0';
			            pd.style.width = '100%';
			            pd.style.height = '100%';
			            pd.style.overflow = 'hidden';
			            pd.style.backgroundColor = '#2e2e2e';
			            pd.style.textAlign = 'center';
			            pd.style.zIndex = '99999';
			            document.getElementsByTagName('body')[0].appendChild(pd);
			            var img = document.createElement('img');
			            img.src = imgData;
			            pd.appendChild(img);
			            img.style.margin = '60px auto 30px'
			            var br = document.createElement('br');
			            var p = document.createElement('p');
			            p.style.width = '100%';
			            p.style.height = 'auto';
			            p.style.fontSize = '22px';
			            p.style.color = '#626262';
			            p.style.lineHeight = '34px';
			            p.style.textAlign = 'center';
			            p.innerHTML = '为了您的良好体验';
			            p.appendChild(br);
			            p.innerHTML += '请关闭手机/平板的横屏操作';
			            pd.appendChild(p);
			        }
			    }
			    if(orientation==90||orientation==-90){
			        if(pd == null && document.getElementById('preventTran') === null) createPd();
			        document.getElementById('preventTran').style.display = 'block';
			    }
			    window.onorientationchange=function(){
			        if(pd == null && document.getElementById('preventTran') == null) createPd();
			        document.getElementById('preventTran').style.display='none';
			        rotate();
			    };
			})//();
            
			
			
		</script>
	</body>

</html>